<%--
  Created by IntelliJ IDEA.
  User: hp
  Date: 2020/3/31
  Time: 12:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <%@ include file="/WEB-INF/jsp/common/css.jsp"%>
    <link rel="stylesheet" href="static/ztree/zTreeStyle.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
    </style>
</head>

<body>

<jsp:include page="/WEB-INF/jsp/common/top.jsp"></jsp:include>
<div class="container-fluid">
    <div class="row">
        <jsp:include page="/WEB-INF/jsp/common/sidebar.jsp"></jsp:include>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <div class="panel panel-default">
                <div class="panel-heading"><i class="glyphicon glyphicon-th-list"></i> 许可权限管理 <div style="float:right;cursor:pointer;" data-toggle="modal" data-target="#myModal"><i class="glyphicon glyphicon-question-sign"></i></div></div>
                <div class="panel-body">
                    <ul id="treeDemo" class="ztree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">帮助</h4>
            </div>
            <div class="modal-body">
                <div class="bs-callout bs-callout-info">
                    <h4>没有默认类</h4>
                    <p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>
                </div>
                <div class="bs-callout bs-callout-info">
                    <h4>没有默认类</h4>
                    <p>警告框没有默认类，只有基类和修饰类。默认的灰色警告框并没有多少意义。所以您要使用一种有意义的警告类。目前提供了成功、消息、警告或危险。</p>
                </div>
            </div>
            <!--
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
            -->
        </div>
    </div>
</div>



<!-- 添加 数据 模态框 -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加菜单</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="title">菜单名称</label>
                    <input type="hidden" name="pid">
                    <input type="text" class="form-control" id="title" name="title" placeholder="菜单">
                   <!-- <label for="title">菜单名称</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="请输入菜单title">-->
                    <label for="icon">菜单图标</label>
                    <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="saveBtn" type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 修改 数据 模态框 -->
<div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改菜单</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="title">菜单名称</label>
                    <input type="hidden" name="pid">
                    <input type="text" class="form-control" id="title" name="title" placeholder="菜单">
                    <label for="name">菜单url</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="请输入菜单url">
                    <label for="icon">菜单图标</label>
                    <input type="text" class="form-control" id="icon" name="icon" placeholder="请输入菜单图标">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateBtn" type="button" class="btn btn-primary">修改</button>
            </div>
        </div>
    </div>
</div>






<%@ include file="/WEB-INF/jsp/common/js.jsp"%>
<script src="static/ztree/jquery.ztree.all-3.5.min.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function() {
            if ($(this).find("ul")) {
                $(this).toggleClass("tree-closed");
                if ($(this).hasClass("tree-closed")) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
            initTree();
        });


        function initTree() {
            var setting = {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: "pid"
                    },
                    key: {
                        url: "xUrl",
                        name: "title"
                    }
                },

                view:{
                    addDiyDom: function(treeId, treeNode){
                        $("#"+treeNode.tId+"_ico").removeClass();
                        $("#"+treeNode.tId+"_span").before("<span class='"+treeNode.icon+"'></span>")
                    },
                    addHoverDom: function(treeId, treeNode){
                        var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
                        aObj.attr("href", "javascript:;");
                        if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return; //return就是表示不再往下走了
                        var s = '<span id="btnGroup'+treeNode.tId+'">';
                        if ( treeNode.level == 0 ) {   //根节点
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')"&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                        } else if ( treeNode.level == 1 ) {   //分支节点
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                            if (treeNode.children.length == 0) {
                                s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                            }
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';
                        } else if ( treeNode.level == 2 ) {    //叶子节点
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';
                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';
                        }

                        s += '</span>';
                        aObj.after(s);
                    },
                    removeHoverDom: function(treeId, treeNode){
                        $("#btnGroup"+treeNode.tId).remove();
                    }
                }
            };
            var url = "${PATH}/permission/loadTree";
            var json = {};
            $.get(url,json,function(result) {   //返回一个list集合，List<TPermission>->JSON->简单格式的json数据
                var zNodes = result;
                zNodes.push({id:0,"name":"用户管理",icon:"glyphicon glyphicon-th-list"});
                $.fn.zTree.init($("#treeDemo"),setting,zNodes);

                var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                treeObj.expandAll(true);
            });

        }








    <%--view: {--%>
    <%--                addDiyDom: addDiyDom,--%>
    <%--                addHoverDom: addHoverDom, //显示按钮--%>
    <%--                removeHoverDom: removeHoverDom  //移除按钮--%>
    <%--            }--%>
    <%--        };--%>
    <%--        //1.加载数据--%>
    <%--        $.get("${PATH}/permission/listAllPermissionTree",function(data){--%>
    <%--            var tree = $.fn.zTree.imit($("#treeDemo").setting,data);--%>
    <%--            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");--%>
    <%--            treeObj.expandAll(true);--%>
    <%--        });--%>
    <%--    }--%>
    <%--               function addDiyDom(treeId, treeNode){--%>
    <%--                    $("#"+treeNode.tId+"_ico").removeClass();--%>
    <%--                    $("#"+treeNode.tId+"_span").before("<span class='"+treeNode.icon+"'></span>");--%>
    <%--                }--%>
    <%--            function addHoverDom(treeId, treeNode){--%>
    <%--                    var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")--%>
    <%--                    aObj.attr("href", "javascript:;");--%>
    <%--                    if (treeNode.editNameFlag || $("#btnGroup"+treeNode.tId).length>0) return; //return就是表示不再往下走了--%>
    <%--                    var s = '<span id="btnGroup'+treeNode.tId+'">';--%>
    <%--                    if ( treeNode.level == 0 ) {   //根节点--%>
    <%--                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')"&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';--%>
    <%--                    } else if ( treeNode.level == 1 ) {   //分支节点--%>
    <%--                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';--%>
    <%--                        if (treeNode.children.length == 0) {--%>
    <%--                            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';--%>
    <%--                        }--%>
    <%--                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addBtn('+treeNode.id+')" >&nbsp;&nbsp;<i class="fa fa-fw fa-plus rbg "></i></a>';--%>
    <%--                    } else if ( treeNode.level == 2 ) {    //叶子节点--%>
    <%--                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="updateBtn('+treeNode.id+')" title="修改权限信息">&nbsp;&nbsp;<i class="fa fa-fw fa-edit rbg "></i></a>';--%>
    <%--                        s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteBtn('+treeNode.id+')">&nbsp;&nbsp;<i class="fa fa-fw fa-times rbg "></i></a>';--%>
    <%--                    }--%>

    <%--                    s += '</span>';--%>
    <%--                    aObj.after(s);--%>
    <%--                }--%>
    <%--     function removeHoverDom(treeId, treeNode){--%>
    <%--                    $("#btnGroup"+treeNode.tId).remove();--%>
    <%--                }--%>

    <%--        var url = "${PATH}/permission/loadTree";--%>
    <%--        var json = {};--%>
    <%--        $.get(url,json,function(result) {   //返回一个list集合，List<TMenu>->JSON->简单格式的json数据--%>
    <%--            var zNodes = result;--%>
    <%--            zNodes.push({id:0,"name":"用户管理",icon:"glyphicon glyphicon-th-list"});--%>
    <%--            $.fn.zTree.init($("#treeDemo"),setting,zNodes);--%>

    <%--            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");--%>
    <%--            treeObj.expandAll(true);--%>
    <%--        })--%>




    //========添加   开始==============================================================================
    function addBtn(id) {
        $("#addModal").modal({
            show:true,
            backdrop:'static',
            keyboard:false
        });

        $("#addModal input[name='pid']").val(id);
    }
    $("#saveBtn").click(function() {
        var pid = $("#addModal input[name='pid']").val();
     //   var name = $("#addModal input[name='name']").val();
        var title = $("#addModal input[name='title']").val();
        var icon = $("#addModal input[name='icon']").val();

        $.ajax({
            type:'post',
            url:"${PATH}/permission/doAdd",
            data:{
                pid:pid,
            //    name:name,
                title:title,
                icon:icon
            },
            success:function (result) {
                if("ok"==result){
                    layer.msg("保存成功",{time:1000},function () {
                        $("#addModal").modal('hide');
                        $("#addModal input[name='pid']").val("");
                    //    $("#addModal input[name='name']").val("");
                        $("#addModal input[name='title']").val("");
                        $("#addModal input[name='icon']").val("");
                        initTree()
                    });
                }else{
                    layer.msg("保存失败");
                }

            }
        });


    });


    //=======添加    结束====================================================================================


    //========修改   开始===================================================================================
    function updateBtn(id) {
        var id = $(this).attr("id");
        $.get("${PATH}/permission/getPermissionById",{id:id},function (result) {
            console.log(result);

            $("#updateModal").modal({
                show:true,
                backdrop:'static',
                keyboard:false
            });
            $("#updateModal input[name='id']").val(result.id);
            $("#updateModal input[name='name']").val(result.name);
            $("#updateModal input[name='title']").val(result.url);
            $("#updateModal input[name='icon']").val(result.icon);
        });
    }




    //========修改  结束==============================================================================================

    //========删除   开始===================================================================================
    function deleteBtn(id){

        layer.confirm("您确定要删除嘛？",{btn:['确定','取消']},function (index) {
            $.post("${PATH}/permission/doDelete",{id:id},function (result) {
                if("ok"==result){
                    layer.msg("删除成功",{time:1000},function () {
                        initTree();
                    });
                }else{
                    layer.msg("删除失败")
                }

            });
            layer.close(index);
        },function(index) {
            layer.close(index);

        });
    }
    //========删除  结束==============================================================================================









</script>
</body>
</html>
